<template>
	<div class="div_1">
		<el-card shadow="always" class="pass-content">
			<el-form ref="changeForm" :model="changeForm" :rules="changeRules" label-width="100px" label-position="right">
				<el-form-item prop="name" label="账号">
					<el-input v-model="changeForm.name" style="width: 90%" :disabled="true" placeholder="请输入账号"></el-input>
				</el-form-item>
				<el-form-item prop="password" label="密码">
					<el-input ref="password" :type="passwordType" style="width: 90%" v-model="changeForm.password" placeholder="请输入账号">
						<span class="show-pwd" @click="showPwd">
							<svg-icon :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'" />
						</span>
					</el-input>
				</el-form-item>
				<el-form-item prop="confirmPassword" label="确认密码">
					<el-input ref="confirmPassword" :type="confirmPasswordType" style="width: 90%" v-model="changeForm.confirmPassword" placeholder="请输入账号">
						<span class="show-pwd" @click="showConfirmPwd">
							<svg-icon :icon-class="confirmPasswordType === 'password' ? 'eye' : 'eye-open'" />
						</span>
					</el-input>
				</el-form-item>
				<el-form-item>
					<el-button style="position: relative; left: 30%" type="primary" @click="submit">提交</el-button>
				</el-form-item>
			</el-form>
		</el-card>
	</div>
</template>
<style>
.div_1 {
	display: flex;
	justify-content: center;
	align-items: center;
	margin-top: 10%;
}
.pass-content {
	padding-top: 50px;
	width: 500px;
	height: 350px;
}
.show-pwd {
	position: absolute;
	right: 10px;
	top: 7px;
	font-size: 16px;
	color: $dark_gray;
	cursor: pointer;
	user-select: none;
}
</style>
<script>
import { changePass } from '@/api/system/user';
import { mapGetters } from 'vuex';
export default {
	name: 'changePass',
	computed: {
		...mapGetters(['currentUser'])
	},
	watch: {
		currentUser: function (value) {
			if (value) {
				this.changeForm.name = value.userName;
			}
		}
	},
	data() {
		const passValid = (rule, value, callback) => {
			if (!value) {
				callback(new Error('请输入密码'));
			} else {
				if (this.changeForm.confirmPassword !== '') {
					this.$refs.changeForm.validateField('confirmPassword');
				}
				callback();
			}
		};
		const confirmValid = (rule, value, callback) => {
			if (!value) {
				callback(new Error('请再次输入密码'));
			} else if (value !== this.changeForm.password) {
				callback(new Error('两次输入密码不一致'));
			} else {
				callback();
			}
		};
		return {
			passValid,
			confirmValid,
			changeForm: {
				name: this.$store.state.user.currentUser.userName,
				password: '',
				confirmPassword: ''
			},
			changeRules: {
				password: [{ required: true, validator: passValid, trigger: 'blur' }],
				confirmPassword: [{ required: true, validator: confirmValid, trigger: 'blur' }]
			},
			passwordType: 'password',
			confirmPasswordType: 'password'
		};
	},
	methods: {
		showPwd() {
			if (this.passwordType === 'password') {
				this.passwordType = '';
			} else {
				this.passwordType = 'password';
			}
			this.$nextTick(() => {
				this.$refs.password.focus();
			});
		},
		showConfirmPwd() {
			if (this.confirmPasswordType === 'password') {
				this.confirmPasswordType = '';
			} else {
				this.confirmPasswordType = 'password';
			}
			this.$nextTick(() => {
				this.$refs.confirmPassword.focus();
			});
		},
		submit() {
			this.$refs['changeForm'].validate((valid) => {
				if (valid) {
					changePass(this.changeForm).then(async () => {
						await this.$store.dispatch('user/logout');
						this.$store.dispatch('tagsView/delAllViews');
						this.$message({ type: 'success', message: '修改密码成功' });
						setTimeout(() => {
							this.$router.push(`/login`);
						}, 1500);
					});
				}
			});
		}
	}
};
</script>
